<template>
  <div class="su-branch-container">
    <div class="table-cover">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="50">
        </el-table-column>
        <el-table-column
          prop="address"
          label="Address"

        >
        </el-table-column>
        <el-table-column
          prop="manager"
          label="Manager"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="telephone"
          label="Telephone"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="order"
          label="Message"
          width="200"
        >
        </el-table-column>
        <el-table-column
          width="100"
          label="Store">
          <template slot-scope="scope">
            <el-button @click="showStore(scope.row)" type="text" size="small">view</el-button>
          </template>
          >
        </el-table-column>
        <el-table-column
          label="Order"
          width="100"
        >
          <template slot-scope="scope">
            <el-button @click="showOrder(scope.row)" type="text" size="small">view</el-button>
          </template>
          >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="Operation"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">edit</el-button>

          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="10"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="Order List"
      :visible.sync="dialogVisible"
      width="70%"
      top="20px"
    >
      <div class="table-cover">
        <el-table
          :data="tableData2"
          style="width: 100%"
          :row-class-name="tableRowClassName"

        >
          <el-table-column
            prop="status"
            label="Status"
            width="90"
          >
          </el-table-column>
          <el-table-column
            prop="branch"
            label="Branch"
            width="70"
          >
          </el-table-column>
          <el-table-column
            prop="sender"
            label="Sender">
          </el-table-column>
          <el-table-column
            prop="time"
            label="Time">
          </el-table-column>
          <el-table-column
            prop="price"
            label="Price">
          </el-table-column>
          <el-table-column
            prop="user"
            label="User">
          </el-table-column>
          <el-table-column
            prop="material"
            label="Material">
          </el-table-column>
          <el-table-column
            prop="burdening"
            label="Burdening">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="Operation"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">view</el-button>
              <el-button type="text" size="small">edit</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          @current-change="changepage"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">Close</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "GDFunctionSuBranch",
    data() {
      return {
        dialogVisible:false,
        id:0,
        page:1
      }
    },
    methods: {
      showStore(e) {
        this.$store.commit('setSel', 2);
        this.$store.commit('setBranchSelect', 'branch' + (e.id + 1));
        this.$store.commit('setBranchList', this.api.getBranchStore(e.id));
      },
      showOrder(e){
        this.$store.commit('setTableData', this.api.getOrderList(e.id));
        this.id=e.id;
        this.dialogVisible=true;
      },
      handleClick(e) {

      },
      changepage(page) {
        this.$store.commit('setTableData', this.api.getOrderList(this.id, page - 1));
      },
      tableRowClassName({row, rowIndex}) {
        if (row.status === 'warning') {
          return 'warning-row';
        } else if (row.status === 'success') {
          return 'success-row';
        } else if (row.status === 'sending') {
          return 'sending-row'
        } else if (row.status === 'cancelled') {
          return 'cancelled-row'
        }
        return '';
      }
    }
    ,
    computed: {
      tableData() {
        return this.api.getBranchList();
      },
      tableData2() {
        return this.$store.state.tableData;
      },
      total(){
        return this.api.getOrderTotalByBranch(this.id);
      }
    },
  }
</script>

<style scoped>
  .su-branch-container {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    margin-bottom: 20px;

  }

  .block {
    position: absolute;
    /*bottom:10px;*/
    left: 50%;
    margin-top: 20px;
    transform: translateX(-50%);
  }

  .table-cover {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 4px;
  }
</style>
